<template>
  <el-dialog :visible="showDialogForm" :title="title" @close="topcardClose" >
    <slot name="form"></slot>
    <template #footer>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="topcardClose">取 消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'MyDialog',
  props: {
    showDialogForm: {
      type: Boolean,
      default: false,
      required: true
    },
    title: {
      type: String,
      default: '标题'
    }
  },
  methods: {
    topcardClose () {
      this.$emit('update:showDialogForm', false)
      this.$emit('topcardClose')
    },
    submit () {
      this.$emit('submit')
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
  width: 600px;
  border-radius: 8px;
  overflow: hidden;
}

::v-deep .el-dialog__body {
  padding: 40px 60px 40px 40px;
}

::v-deep .el-dialog__header {
  background: #f3f4f7;
}
</style>
